<template>
  <div class="nav">
    <div class="nav_item_wrapper">
      <div
        :class="{ active: tabName == 'add_oil' }"
        class="item add_oil"
        @click="navClickHandle('add_oil')"
      >
        <router-link to="/add_oil">加油</router-link>
      </div>
      <div
        :class="{ active: tabName == 'car_life' }"
        class="item car_life"
        @click="navClickHandle('car_life')"
      >
        <router-link to="/car_life">车生活</router-link>
      </div>
      <div
        :class="{ active: tabName == 'mine' }"
        class="item mine"
        @click="navClickHandle('mine')"
      >
        <router-link to="/mine">我的</router-link>
      </div>
    </div>
    <div class="router_view_container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabName: "add_oil"
    };
  },
  mounted() {
    this.tabName = this.$store.state.highLightTabName;
  },
  methods: {
    navClickHandle(tabName) {
      this.$store.commit("changeHightLightTabName", tabName);
      this.tabName = tabName;
    }
  }
};
</script>

<style lang="stylus">
.nav {
  width: 100%;

  .nav_item_wrapper {
    position: fixed;
    width: 100%;
    height: 41.5px;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    z-index: 1000;
    background: #fff;
  }

  .item {
    width: 33%;
    text-align: center;
    font-size: 18px;

    a {
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .router_view_container {
    padding-top: 63px;
  }
}

.active {
  border-bottom: solid 5px red;
}
</style>
